<template xmlns:http="http://www.w3.org/1999/xhtml">
    <div id="swipe">
        <div class=" lbt-box">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner01.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner02.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner03.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner04.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner05.jpg" alt="">
                        </a>
                    </div>
                </div>

            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
        </div>
    </div>

</template>

<script>

    import Swiper from "swiper"

    export default {
        name: "swipe",
        data() {
            return {}
        },
        methods: {
            lbtInit() {
                new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项
                    autoplay: true,// 自动切换
                    autoplayDisableOnInteraction: false,

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    effect: 'fade',
                    fadeEffect: {
                        crossFade: true,
                    }

                })
            }
        },
        mounted() {
            this.lbtInit()
        }
    }
</script>

<style scoped lang="less">
    #swipe {
        background-color: #000;

        .lbt-box {
            position: relative;
        }
    }


    .swiper-container {
        width: 730px;
        margin: 0;

        img {
            display: block;
        }


    }

    .swiper-button-prev {
        left: -65px;
    }

    .swiper-button-next {
        right: -300px;
    }
    .swiper-button-prev,
    .swiper-button-next{
        outline: none;
    }
</style>
